<template>
    <div class="st">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{sex}}</h2>
        <h2>学生年龄：{{age}}</h2>
        <h2>当前num值：{{num}}</h2>
        <button @click="add">点我num++</button>
        <button @click="sendmsg">点我给父组件app传递学生名称</button>
        <button @click="unbind">点我解绑自定义事件</button>
        <button @click="dathed">点我销毁student实例对象</button>
    </div>
</template>

<script>
//export default默认暴露，export分别暴露，export{}最后写，统一暴露

export default {   //一般用默认暴露
    // 指定标签名
    name:'Student',
    data() {
        return {
            msg:'你好同学！',
            name:'菜菜',
            sex:'女',
            age:18,
            num:1
        }
    },
    methods: {
        add(){
            this.num++
        },
        sendmsg(){
            // 通过this.$emit('自定义事件名称')触发事件,可以传多个参数
            this.$emit('mysend',this.name,666,888,999)
        },
        unbind(){
            // 通过this.$off('自定义事件')解绑事件绑定
            this.$off('mysend')   //解绑单个事件
            console.log("已解绑")
            // this.$off(['mysend','xxxx'])   //解绑多个事件需要用数组
        },
        dathed(){
            // 销毁自身实例对象
            this.$destroy()
            console.log("已销毁，自定义事件将不能用，原生事件可以用，但没有交互性")
        }
    },    
}

</script>

<style>
    .st{
        background-color:hotpink;
    }
</style>